<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* 页面整体样式 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

/* 表格容器样式 */
.table-container {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
}

/* 表格基本样式 */
.table-container table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 表头样式 */
.table-container th {
    background-color: #3498db;
    color: white;
    font-weight: normal;
    text-align: center;
    padding: 10px;
}

/* 表格行样式 */
.table-container td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

/* 表格行偶数行背景色 */
.table-container tr:nth-child(even) {
    background-color: #ecf0f1;
}

/* 按钮基本样式 */
.button, .edit-button, .delete-button {
    padding: 8px 15px;
    margin: 2px;
    cursor: pointer;
    outline: none;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

/* 修改按钮样式 */
.edit-button {
    background-color: #2ecc71;
}

.edit-button:hover {
    background-color: #27ae60;
}

/* 删除按钮样式 */
.delete-button {
    background-color: #e74c3c;
}

.delete-button:hover {
    background-color: #c0392b;
}

/* 返回链接样式 */
.back-link {
    display: inline-block;
    padding: 10px 15px;
    margin: 10px 0;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.back-link:hover {
    border-color: #3498db;
}

/* 文本居中样式 */
.text-center {
    text-align: center;
}

/* 禁用文本选择，用于不可操作的单元格 */
.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* 标准语法 */
}
.btn-back {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    color: #fff; /* 文字颜色 */
    background-color: #3498db; /* 按钮背景色 */
    text-decoration: none; /* 去除下划线 */
    font-weight: bold; /* 字体加粗 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s ease; /* 背景色渐变效果 */
    text-align: center;
    cursor: pointer;
}

/* 鼠标悬停效果 */
.btn-back:hover {
    background-color: #2980b9; /* 鼠标悬停时的背景色 */
}

/* 鼠标点击效果 */
.btn-back:active {
    background-color: #2471a3; /* 鼠标点击时的背景色 */
    transform: translateY(2px); /* 轻微下移，制造按下效果 */
}
</style>
</head>
<body>
	  <div class="table-container">
        <table>
            <tr>	
            	<th>用户编号</th>
                <th>用户名</th>
                <th>手机号</th>	
                <th>权限</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${userList}" var="user">
                <tr>
                	<td style="text-align:center;">${user.userId}</td>
                    <td style="text-align:center;">${user.username}</td>
                    <td style="text-align:center;">${user.phone}</td>
                    <td style="text-align:center;">${user.roleId}</td>
                    <c:if test="${user.roleId == 2}">
                        <td>不可操作</td>
                    </c:if>
                    <c:if test="${user.roleId == 1}">
                        <td>
                            <button class="button" onclick="edit('${user.userId}')">修改</button>
                            &nbsp;&nbsp;&nbsp;
                            <button class="button delete-button" onclick="del('${user.userId}')">删除</button>
                        </td>
                    </c:if>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="5" class="text-center">
                    <a href="adminIndex.jsp" class="btn-back">返回</a>
                </td>
            </tr>
        </table>
    </div>
</body>

	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js"></script>
<script>
	function edit(userId){
		window.location.href="AdminUpdateUserServlet?userId="+userId;
	}
	function del(userId){
		$.post("AdminDeleteUserServlet",{
			userId:userId
		},function(data){
			if(data="OK"){
				layer.msg("删除成功");
				setTimeout("move()",2000);
			} else {
				layer.msg("删除失败");
			}
		})
	}
	function move(){
		window.location.href="AdminUserServlet";
	}
</script>

</html>